<template>
  <div class="app-container">
    <div class="btn-wrap">
      <el-button type="primary" @click="handleAdd" size="small"
        >添加账户</el-button
      >
      <el-button type="primary" link style="color: #039691" @click="navRecord"
        >账户充值记录</el-button
      >
    </div>
    <el-card shadow="never">
      <div class="title">今日汇率：</div>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in rateList" :key="index"
          ><div class="rates">
            {{ item.foundationCurrencyName }}-{{
              item.settlementCurrencyName
            }}
            (汇率{{ item.amount }}{{ item.foundationCurrencyName }}={{
              item.currentExchangerate
            }}{{ item.settlementCurrencyName }})
          </div></el-col
        >
      </el-row>
    </el-card>
    <el-table :data="accountList">
      <el-table-column label="序号" width="80" type="index" />
      <el-table-column
        label="公司主体"
        min-width="140"
        align="center"
        prop="enterpriseName"
        show-overflow-tooltip
      />
      <el-table-column
        label="推广链接"
        min-width="140"
        align="center"
        prop="promotionLink"
        show-overflow-tooltip
      />
      <el-table-column
        label="CID"
        min-width="140"
        align="center"
        prop="oeid"
        show-overflow-tooltip
      />
      <el-table-column
        label="状态"
        min-width="80"
        align="center"
        prop="status"
        show-overflow-tooltip
      />
      <el-table-column
        label="账户余额"
        min-width="120"
        align="center"
        prop="mediaBalance"
      >
        <template #default="scope">
          <div>
            {{ scope.row.mediaBalance }}
            {{ selectDictLabel(bus_currency_type, currencyType) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="充值金额"
        min-width="140"
        align="center"
        prop="status"
      >
        <template #default="scope">
          <div style="display: flex; flex-direction: row; align-items: center">
            <el-input-number
              v-model="scope.row.amount"
              :controls="false"
              style="width: 100%; flex: 1"
            />
            <span> {{ selectDictLabel(bus_currency_type, currencyType) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center" prop="status">
        <template #default="scope">
          <el-button
            type="danger"
            @click="handleDel"
            link
            @click.prevent="deleteRow(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="total-wrap" v-if="accountList.length > 0">
      <div>
        广告账户充值合计：{{ formatMoney(totalPrice) }}
        {{ selectDictLabel(bus_currency_type, currencyType) }}
      </div>
      <div>
        服务费：{{ formatMoney(fee)
        }}{{ selectDictLabel(bus_currency_type, currencyType) }}
      </div>
      <el-button
        type="primary"
        @click="handleSubmit"
        :loading="loading"
        style="background-color: #039691; margin-top: 10px"
      >
        确认提交充值申请
      </el-button>
    </div>

    <addRechargeAccount
      v-model:value="addVisible"
      v-if="addVisible"
      @on-success="selectAccount"
      :currencyType="currencyType"
    ></addRechargeAccount>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import {
  getExchangeRateList,
  getServiceFee,
  transAccountFund,
} from "@/api/customer_handle/index.js";

import { onMounted } from "vue";
import { getUserInfo } from "@/api/login";
import { selectDictLabel, formatMoney } from "@/utils/ruoyi.js";
import addRechargeAccount from "./components/add-recharge-account.vue";
import { useRouter } from "vue-router";

const { proxy } = getCurrentInstance();

const { bus_currency_type } = proxy.useDict("bus_currency_type");

const rateList = ref([]);
const activeName = ref("1");
const currencyType = ref("");
const addVisible = ref(false);
const loading = ref(false);
const accountList = ref([]);
const fee = ref(0);
const router = useRouter();

const totalPrice = computed(() => {
  const total = accountList.value.reduce((total, item) => {
    return total + item.amount;
  }, 0);
  getFee(total);
  return total;
});
function handleAdd() {
  addVisible.value = true;
}
function getRateList() {
  getExchangeRateList().then(({ data }) => {
    rateList.value = data;
  });
}

function getFee(total) {
  getServiceFee({ paymentPrice: total }).then((res) => {
    fee.value = res.data.servicePrcie;
  });
}

const navRecord = () => {
  router.push({
    path: "/fundMng/AccountRechargeRecord",
  });
};
const deleteRow = (index) => {
  accountList.value.splice(index, 1);
};

const selectAccount = (data) => {
  accountList.value = data.map((item) => {
    return {
      ...item,
      amount: "",
    };
  });
};

function handleSubmit() {
  let index = -1;
  for (let i = 0; i < accountList.value.length; i++) {
    const item = accountList.value[i];
    if (!item.amount) {
      index = i;
      break;
    }
  }
  if (index > -1) {
    proxy.$message.error("请填写第" + (index + 1) + "行充值金额");
    return;
  }
  const params = [];
  accountList.value.forEach((item) => {
    params.push({
      mediaId: item.id,
      amount: item.amount,
      transactionsType: "0",
    });
  });
  proxy.$modal
    .confirm("是否确认提交充值申请？")
    .then(function () {
      return transAccountFund(params);
    })
    .then(() => {
      accountList.value = [];
      proxy.$modal.msgSuccess("申请成功");
    })
    .catch(() => {});
}

function fetchUserInfo() {
  getUserInfo().then(({ data }) => {
    currencyType.value = data.currencyType;
  });
}

onMounted(() => {
  getRateList();
  fetchUserInfo();
});
</script>

<style lang="scss" scoped>
.btn-wrap {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.rates {
  color: #606266;
  font-size: 13px;
  line-height: 22px;
}
.total-wrap {
  margin: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  align-items: end;
  font-size: 14px;
}
</style>
